<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Tables</h2>
                  <p>Documentation and examples for opt-in styling of tables.</p>
                  <a href="http://getbootstrap.com/docs/4.0/content/tables" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="example">Example</h3>
                <div class="code-example">
                  <table class="table table-hover align-items-center">
                    <thead>
                      <tr>
                        <th scope="col">
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="th_checkbox" />
                            <label class="custom-control-label" for="th_checkbox"></label>
                          </div>
                        </th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Location</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="bg-white" scope="row">
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="td_checkbox_1" />
                            <label class="custom-control-label" for="td_checkbox_1"></label>
                          </div>
                        </td>
                        <td>
                          <div class="media align-items-center">
                            <img src="../assets/images/prv/thumb-1.jpg" class="avatar avatar-lg mr-3" />
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                              <span class="font-weight-normal text-muted">Web Developer</span>
                            </div>
                          </div>
                        </td>
                        <td>nabiha.armstrong@example.com</td>
                        <td>Cluj Napoca, RO</td>
                      </tr>
                      <tr class="bg-white" scope="row">
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="td_checkbox_2" />
                            <label class="custom-control-label" for="td_checkbox_2"></label>
                          </div>
                        </td>
                        <td>
                          <div class="media align-items-center">
                            <img src="../assets/images/prv/thumb-2.jpg" class="avatar avatar-lg mr-3" />
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                              <span class="font-weight-normal text-muted">Product Designer</span>
                            </div>
                          </div>
                        </td>
                        <td>dan.holding@example.com</td>
                        <td>New York, USA</td>
                      </tr>
                      <tr class="bg-white" scope="row">
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="td_checkbox_1" />
                            <label class="custom-control-label" for="td_checkbox_1"></label>
                          </div>
                        </td>
                        <td>
                          <div class="media align-items-center">
                            <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                              <span class="font-weight-normal text-muted">Sales Manager</span>
                            </div>
                          </div>
                        </td>
                        <td>will.smith@example.com</td>
                        <td>Los Angeles, USA</td>
                      </tr>
                      <tr class="bg-white" scope="row">
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="td_checkbox_1" />
                            <label class="custom-control-label" for="td_checkbox_1"></label>
                          </div>
                        </td>
                        <td>
                          <div class="media align-items-center">
                            <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                              <span class="font-weight-normal text-muted">UI/UX Designer</span>
                            </div>
                          </div>
                        </td>
                        <td>charlize.theron@example.com</td>
                        <td>Bucharest, RO</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-hover align-items-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;thead&gt;</span>
        <span class="nt">&lt;tr&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"th_checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"th_checkbox"</span><span class="nt">&gt;&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Name<span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Location<span class="nt">&lt;/th&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;/thead&gt;</span>
    <span class="nt">&lt;tbody&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"../assets/images/prv/thumb-1.jpg"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg mr-3"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Nabiha Armstrong<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Web Developer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>nabiha.armstrong@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Cluj Napoca, RO<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"td_checkbox_2"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"td_checkbox_2"</span><span class="nt">&gt;&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"../assets/images/prv/thumb-2.jpg"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg mr-3"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Dan Holding<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Product Designer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>dan.holding@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>New York, USA<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg bg-blue mr-3"</span><span class="nt">&gt;</span>WS<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Will Smith<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Sales Manager<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>will.smith@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Los Angeles, USA<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"custom-control custom-checkbox"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"custom-control-input"</span> <span class="na">id=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"custom-control-label"</span> <span class="na">for=</span><span class="s">"td_checkbox_1"</span><span class="nt">&gt;&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg bg-pink mr-3"</span><span class="nt">&gt;</span>CT<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Charlize Theron<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>UI/UX Designer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>charlize.theron@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Bucharest, RO<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre>
                </div>
                <h3 id="card-rows">Card rows</h3>
                <div class="code-example">
                  <table class="table table-hover table-cards align-items-center">
                    <thead>
                      <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Location</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="bg-white">
                        <th scope="row">
                          <div class="media align-items-center">
                            <img src="../assets/images/prv/thumb-1.jpg" class="avatar avatar-lg mr-3" />
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Nabiha Armstrong</h6>
                              <span class="font-weight-normal text-muted">Web Developer</span>
                            </div>
                          </div>
                        </th>
                        <td>nabiha.armstrong@example.com</td>
                        <td>Cluj Napoca, RO</td>
                      </tr>
                      <tr class="table-divider"></tr>
                      <tr class="bg-white">
                        <th scope="row">
                          <div class="media align-items-center">
                            <img src="../assets/images/prv/thumb-2.jpg" class="avatar avatar-lg mr-3" />
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Dan Holding</h6>
                              <span class="font-weight-normal text-muted">Product Designer</span>
                            </div>
                          </div>
                        </th>
                        <td>dan.holding@example.com</td>
                        <td>New York, USA</td>
                      </tr>
                      <tr class="table-divider"></tr>
                      <tr class="bg-white">
                        <th scope="row">
                          <div class="media align-items-center">
                            <span class="avatar avatar-lg bg-blue mr-3">WS</span>
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Will Smith</h6>
                              <span class="font-weight-normal text-muted">Sales Manager</span>
                            </div>
                          </div>
                        </th>
                        <td>will.smith@example.com</td>
                        <td>Los Angeles, USA</td>
                      </tr>
                      <tr class="table-divider"></tr>
                      <tr class="bg-white">
                        <th scope="row">
                          <div class="media align-items-center">
                            <span class="avatar avatar-lg bg-pink mr-3">CT</span>
                            <div class="media-body">
                              <h6 class="h5 font-weight-normal mb-0">Charlize Theron</h6>
                              <span class="font-weight-normal text-muted">UI/UX Designer</span>
                            </div>
                          </div>
                        </th>
                        <td>charlize.theron@example.com</td>
                        <td>Bucharest, RO</td>
                      </tr>
                      <tr class="table-divider"></tr>
                    </tbody>
                  </table>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-hover table-cards align-items-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;thead&gt;</span>
        <span class="nt">&lt;tr&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Name<span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Location<span class="nt">&lt;/th&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;/thead&gt;</span>
    <span class="nt">&lt;tbody&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"../assets/images/prv/thumb-1.jpg"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg mr-3"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Nabiha Armstrong<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Web Developer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;td&gt;</span>nabiha.armstrong@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Cluj Napoca, RO<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"table-divider"</span><span class="nt">&gt;&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"../assets/images/prv/thumb-2.jpg"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg mr-3"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Dan Holding<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Product Designer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;td&gt;</span>dan.holding@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>New York, USA<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"table-divider"</span><span class="nt">&gt;&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg bg-blue mr-3"</span><span class="nt">&gt;</span>WS<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Will Smith<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>Sales Manager<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;td&gt;</span>will.smith@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Los Angeles, USA<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"table-divider"</span><span class="nt">&gt;&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"bg-white"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media align-items-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg bg-pink mr-3"</span><span class="nt">&gt;</span>CT<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"h5 font-weight-normal mb-0"</span><span class="nt">&gt;</span>Charlize Theron<span class="nt">&lt;/h6&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-weight-normal text-muted"</span><span class="nt">&gt;</span>UI/UX Designer<span class="nt">&lt;/span&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/th&gt;</span>
            <span class="nt">&lt;td&gt;</span>charlize.theron@example.com<span class="nt">&lt;/td&gt;</span>
            <span class="nt">&lt;td&gt;</span>Bucharest, RO<span class="nt">&lt;/td&gt;</span>
        <span class="nt">&lt;/tr&gt;</span>
        <span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"table-divider"</span><span class="nt">&gt;&lt;/tr&gt;</span>
    <span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span></code></pre>
                </div>
                <div class="card bg-secondary">
                  <div class="card-body">
                    <h6 class="title-decorative">Additional Class Reference</h6>
                    <p>You can see all the background options in the dedicated page which can be found <a href="color-palette.html">here</a>.</p>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.table-cards</code>
                      </dt>
                      <dd class="col-8">Apply to <code>.table</code> for a card style table</dd>
                    </dl>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.align-items-center</code>
                      </dt>
                      <dd class="col-8">Apply to <code>.table</code> in order to center vertically the elements</dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#example">Example</a></li>
                    <li class="toc-entry toc-h3"><a href="#card-rows">Card rows</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>